<template>
  <div class="view-wrapper" :style="viewStyle">
    <div class="weather-bg" :style="style">
      <div class="bg-wrapper">
        <!-- 白天-晴天 -->
        <div :style="bgStyle" v-show="showCloud">
          <img class="move-target"
               :src="require('@/assets/image/cloud.png')" width="100%" :style="{top: topPosition + 'vh'}" />
        </div>

        <!-- 傍晚-晴天 -->
        <div :style="bgStyle" v-show="showDusk">
          <img class="move-target"
                v-show="showDusk && !showRainy && !showOvercast"
               :src="require(`@/assets/image/yun${currentTheme === weatherMap.sunny.key ? '1' : '4'}.webp`)" 
               width="100%" :style="{top: 40 + 'vh'}" />
        </div>

        <template>
          <!-- 星空背景 -->
          <div ref="starRef" v-show="showStar"></div>
          <!-- 流星 -->
          <div class="meteor" v-show="showStar"></div>
        </template>

        <!-- 下雨 -->
        <div :style="bgStyle" v-show="showRainy">
          <img class="move-target"
               :src="require('@/assets/image/cloud.png')" width="100%" :style="{top: topPosition + 'vh', opacity: 0.2}" />
          <div ref="rainRef"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from "@/util/eventBus";
import {WeatherMap} from "@/config/constant/BgMap";
import {mapGetters} from "vuex";

export default {
  name: "WeatherBg",
  // mixins: [getDaytimeChange],
  props: {
    // 天气类型
    type: {
      type: String,
      default: 'rainy'
    }
  },
  data() {
    return {
      opacity: 1,
      transform: null,
      topPosition: 0,
      scale: 1,
      isNight: false,
      markId: '',
      weatherMap: WeatherMap
    }
  },
  computed: {
    ...mapGetters(['bgImage', 'currentTheme', 'currentTime']),
    viewStyle() {
      return {
        backgroundImage: this.bgImage
        // backgroundImage: WeatherTypeBgMap.rainy
      }
    },
    style() {
      return {
        opacity: this.opacity,
      }
    },
    bgStyle() {
      return {
        transform: this.transform,
        transitionDuration: '1s'
      }
    },
    showDawn() {
      return this.currentTime === WeatherMap.dawn.key;
    },
    showMorning() {
      return this.currentTime === WeatherMap.morning.key && this.currentTime === WeatherMap.morning.key;
    },
    showNoon() {
      return this.currentTime === WeatherMap.noon.key;
    },
    showAfternoon() {
      return this.currentTime === WeatherMap.afternoon.key;
    },
    showDusk() {
      return this.currentTime === WeatherMap.dusk.key;
    },
    showEvening() {
      return this.currentTime === WeatherMap.evening.key;
    },

    // 天气类型
    showSunny() {
      return this.currentTheme === WeatherMap.sunny.key;
    },
    showCloudy() {
      return this.currentTheme === WeatherMap.cloudy.key;
    },
    showOvercast() {
      return this.currentTheme === WeatherMap.overcast.key;
    },
    showRainy() {
      return this.currentTheme === WeatherMap.rainy.key;
    },

    // 星空
    showStar() {
      return this.showEvening && this.showSunny;
    },
    // 云朵
    showCloud() {
      return !this.showEvening && !this.showDusk && this.showSunny;
    }
  },
  methods: {
    handleScroll() {
      console.log('test-> scrollY', window.scrollY);
      let {scrollY, innerHeight} = window;
      let opacity = 1 - scrollY / innerHeight * 4;
      if (opacity < 0.08) {
        opacity = 0
      }
      let inRange = opacity >= 0 && opacity <= 1;
      // 往下滚动
      if (scrollY >= 112) {
        if (inRange) {
          this.opacity = opacity;
        }
        // 往上滚动
      } else {
        if (inRange) {
          this.opacity = opacity;
        }
        this.scale = 1 + scrollY * 0.005;
        this.transform = `scale(${this.scale})`;
      }
    },
    handleTouch() {
      eventBus.$on('touchInfo', (data) => {
        let distance = data.end - data.start;
        console.log('distance', distance);
        let scale = distance < 50 ? distance * 0.1 : distance * 0.01;
        console.log('scale1', scale);
        if (scale > 1.5) {
          scale = 1.5;
        }
        if (scale < 1) {
          scale = 1;
        }
        // if (data.isEndTouch) {
        //   scale = 1;
        // }
        console.log('scale2', scale);
        this.transform = `scale(${scale})`;
      });
    },

    // 创建星星的标签
    createSpanStar() {
      let id = this.markId;
      let twinkleTime = Math.random() * 20;
      if (twinkleTime < 2) {
        twinkleTime += 2;
      }
      let span = document.createElement('span');
      span.setAttribute(id, '');
      span.setAttribute('class', 'star');
      span.style.animation = `starTwinkle ${twinkleTime}s infinite`;
      span.style.top = Math.random() * 300 + 'px';
      span.style.left = Math.random() * window.innerWidth + 'px';
      return span;
    },

    // 星空背景
    createStarryBg() {
      // let h = new Date().getHours();
      // if (h < 20 && h >= 5 && !this.showStar) {
      //   this.isNight = false;
      //   return;
      // }
      // this.isNight = true;
      console.log('创建星空背景');
      this.$nextTick(() => {
        let starRefDom = this.$refs['starRef'];
        let attr = starRefDom.getAttributeNames()[0];
        this.markId = attr;
        for (let i = 0; i < 40; i++) {
          starRefDom.appendChild(this.createSpanStar());
        }
      })

    },

    // 创建雨滴标签
    createSpanRainDrop() {
      let id = this.markId;
      let fallTime = Math.random() * 2;
      let delayTime = Math.random();
      if(fallTime <= 0.5) {
        fallTime = 0.5;
      }

      let span = document.createElement('span');
      span.setAttribute(id, '');
      span.setAttribute('class', 'rain-drop');
      span.style.animation = `rainFall-${id} ${fallTime}s infinite ease-in`;
      span.style.top = Math.random() * 20 + 'vh';
      span.style.left = Math.random() * window.innerWidth * 1.2 + 'px';
      // span.style.transform = `translate(${Math.random() * window.innerHeight * -0.5}%, ${Math.random() * window.innerWidth * 1.2}%)`;
      return span;
    },

    // 创建下雨背景
    createRainyBg() {
      this.$nextTick(() => {
        let rainRefDom = this.$refs['rainRef'];
        // 获取vue对元素标记，添加class样式时需要用到标记
        let attr = rainRefDom.getAttributeNames()[0];
        this.markId = attr;
        for (let i = 0; i < 100; i++) {
          rainRefDom.appendChild(this.createSpanRainDrop());
        }
      })

      let handler1 = () => {
        console.log('长住屏幕');
        let rains = document.getElementsByClassName('rain-drop');
        
        for(let i = 0; i < rains.length; i++) {
          rains[i].style.animationDuration = '30s';
          rains[i].setAttribute('class', 'rain-drop rain-drop-2');
        }
      };

      let startTime = 0;
      let endTime = 0;
      let timer = null;
      
      window.addEventListener('touchstart', () => {
        startTime = new Date();
        timer = setTimeout(() => {
          
          console.log('按住屏幕');
          let rains = document.getElementsByClassName('rain-drop');
          
          for(let i = 0; i < rains.length; i++) {
            rains[i].style.animationDuration = '30s';
            rains[i].setAttribute('class', 'rain-drop rain-drop-2');
          }
        }, 1000);
      });

      window.addEventListener('touchend', () => {
        console.log('停止按住屏幕');
        endTime = new Date();
        let timeGap = endTime - startTime;
        if(timeGap < 1000) {
          clearTimeout(timer);
          return;
        }
        let rains = document.getElementsByClassName('rain-drop');
        for(let i = 0; i < rains.length; i++) {
          rains[i].style.animationDuration = `${Math.random() * 2}s`;
          rains[i].setAttribute('class', 'rain-drop');
        }
      })

    },
  },

  watch: {
    currentTheme(val) {
      if(val === WeatherMap.rainy.key) {
        this.createRainyBg();
      }
      if(this.showStar) {
        this.createStarryBg();
      }
    },
    currentTime(val) {
      if(this.showStar) {
        this.createStarryBg();
      }
    }
  },

  created() {
    // 滚动时处理透明度和缩放大小
    window.addEventListener('scroll', this.handleScroll);

    this.handleTouch();
    eventBus.$on('changeTopPosition', data => {
      this.topPosition = data.topPosition;
    });

  },

  mounted() {
    
  },

  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }

}
</script>

<style lang="scss" scoped>
.view-wrapper {
  //background-image: linear-gradient(120deg, #66a6ff 0%, #7fcffd 100%);
  z-index: -10;
  width: 101vw;
  height: 101vh;
  position: fixed;
  left: 0;
  top: 0;
  background-clip: content-box;
}

.weather-bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;

  @keyframes cloudMove {
    0% {
      left: -80%;
      top: 2%;
    }
    5% {
      top: 0%;
    }
    10% {
      top: 2%;
    }
    15% {
      top: 0%;
    }
    20% {
      top: 2%;
    }
    25% {
      top: 0%;
    }
    30% {
      top: 2%;
    }
    35% {
      top: 0%;
    }
    40% {
      top: 2%;
    }
    45% {
      top: 0%;
    }
    50% {
      left: 80%;
      top: 2%;
    }
    55% {
      top: 1%;
    }
    60% {
      top: 0%;
    }
    65% {
      top: 2%;
    }
    70% {
      top: 0%;
    }
    75% {
      top: 2%;
    }
    80% {
      top: 0%;
    }
    85% {
      top: 2%;
    }
    90% {
      top: 0%;
    }
    95% {
      top: 2%;
    }
    100% {
      left: -80%;
      top: 0%;
    }
  }

  @keyframes cloudMove2 {
    0% {
      transform: translate(-120%, 6%);
    }
    5% {
      transform: translate(-100%, 0);
    }
    10% {
      transform: translate(-80%, -10%);
    }
    15% {
      transform: translate(-60%, 0%);
    }
    20% {
      transform: translate(-40%, 6%);
    }
    25% {
      transform: translate(-20%, 0%);
    }
    30% {
      transform: translate(-10%, -10%);
    }
    35% {
      transform: translate(0%, 0%);
    }
    40% {
      transform: translate(10%, 6%);
    }
    45% {
      transform: translate(20%, 0%);
    }
    50% {
      transform: translate(25%, 6%);
    }
    55% {
      transform: translate(20%, 1%);
    }
    60% {
      transform: translate(10%, 0%);
    }
    65% {
      transform: translate(0%, -10%);
    }
    70% {
      transform: translate(-20%, 0%);
    }
    75% {
      transform: translate(-40%, 6%);
    }
    80% {
      transform: translate(-60%, 0%);
    }
    85% {
      transform: translate(-80%, -10%);
    }
    90% {
      transform: translate(-100%, 0%);
    }
    95% {
      transform: translate(-110%, 6%);
    }
    100% {
      transform: translate(-120%, 0);
    }
  }

  @keyframes meteorFlow {
    0% {
      transform: translate(400vw, -126vh) rotate(45deg);
    }

    100% {
      transform: translate(-400vw, 200vh) rotate(45deg);
    }
  }

  @keyframes rainFall {
    0% {
      transform: translate(0) rotate(0deg) scale(0);
    }

    100% {
      transform: translate(0, 120vh) rotate(4deg) scale(1);
    }
  }

  .bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;

    .move-target {
      position: fixed;
      width: 100%;
      //transform: translate(25%, 0%);
      animation: cloudMove2 180s infinite linear;
    }

    // 流星样式
    .meteor {
      position: absolute;
      height: 120px;
      width: 1px;
      background-color: rgba(255,255,255, .4);
      animation: meteorFlow 12s infinite ease-in;
      transition: 5s;
    }

    // 雨滴样式
    .rain-drop {
      position: absolute;
      display: inline-block;
      height: 120px;
      width: 8px;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      background-color: rgba(255,255,255, .2);
      animation: rainFall 1s infinite;
      transition: 1s height;
    }

    // 雨滴样式
    .rain-drop-2 {
      position: absolute;
      display: inline-block;
      height: 18px;
      width: 18px;
      // border-top-left-radius: 50%;
      // border-top-right-radius: 50%;
      // border-bottom-left-radius: 4px;
      // border-bottom-right-radius: 4px;
      // border-radius: 50%;
      // background-color: rgba(255,255,255, 0.5);
      // animation: rainFall 1s infinite;
      // transition: 1s;
    }
    .rain-drop-2::after {
      content: "";
      left: 0;
      top: 0;
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 75% 65% 75% 65% / 70% 75% 70% 70%;
      box-shadow: inset 13px 1px 4px -10px rgba(235, 235, 235, 0.1), inset 14px -4px 10px -10px rgba(235, 235, 235, 0.1), inset 0px -3px 10px 1px rgba(235, 235, 235, 0.1), inset 0px -15px 10px 0px rgba(235, 235, 235, 0.1), inset -20px 10px 5px -20px rgba(235, 235, 235, 0.1), inset -20px 15px 10px -20px rgba(235, 235, 235, 0.1), inset 0px 3px 2px 1px rgba(235, 235, 235, 0.1), inset 9px 29px 29px 0px rgba(235, 235, 235, 0.1), 0px 2px 1px 1px rgba(235, 235, 235, 0.8)
    }

  }
}
</style>
